<!--
 * @Description: 页面右上角的个人头像和名称
 * @Author: youzi
 * @Date: 2019-07-18 11:26
 * @LastEditTime: 2020-09-27 09:03:26
 * @LastEditors: youzi
 * @修改后：按照设计稿，没有头像，只有名字和欢迎语，右边一个退出按钮，这里按照设计稿来做，然后没有下拉菜单，不会让用户自定义风格等内容，密码也不允许修改。
 -->

<template>
  <div class="header-container">
    <div class="user">
      <!-- <a-avatar class="avatar" size="small" shape="circle" :src="avatar" /> -->
      <span class="curr-user">{{ user.username }}</span>
      <!-- <br /> -->
      <span class="welcome">{{ welcomeMsg }}</span>
    </div>
    <a-popconfirm
      placement="bottomRight"
      title="您确定要退出吗？"
      @confirm="popConfirm"
      @cancel="popCancel"
      okText="是"
      cancelText="否"
    >
      <div class="quit-icon">
        <icon-font type="icontuichu" class="ico"></icon-font>
        <!-- <br /> -->
        <span class="quit-word">退出</span>
      </div>
    </a-popconfirm>

    <!-- <a-icon :component="logoutIcon" style="cursor: pointer" /> -->
    <!-- <a-dropdown style="display: inline-block; height: 100%; vertical-align: initial">
      <a-menu style="width: 150px" slot="overlay">
        <a-menu-item @click="openProfile">
          <a-icon type="user" />
          <span>个人中心</span>
        </a-menu-item>
        <a-menu-item @click="updatePassword">
          <a-icon type="key" />
          <span>密码修改</span>
        </a-menu-item>
        <a-menu-divider></a-menu-divider>
        <a-menu-item @click="handleSettingClick">
          <a-icon type="setting" />
          <span>系统定制</span>
        </a-menu-item>
        <a-menu-divider></a-menu-divider>
        <a-menu-item @click="logout">
          <a-icon type="logout" />
          <span>退出登录</span>
        </a-menu-item>
      </a-menu>
    </a-dropdown> -->
    <!-- <update-password
      @success="handleUpdate"
      @cancel="handleCancelUpdate"
      :user="user"
      :updatePasswordModelVisible="updatePasswordModelVisible"
    >
    </update-password> -->
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
// import UpdatePassword from '../personal/UpdatePassword';
// import logoutSvg from '~/icons/logout.vue';
// import IconFont from '~/icons/icon.js';

/* const logoutIcon = {
  template: `
    <a-icon :component="logoutSvg" />
  `,
  data() {
    return {
      logoutSvg
    };
  }
}; */
export default {
  name: 'HeaderAvatar',
  // components: { IconFont },
  data() {
    return {
      updatePasswordModelVisible: false
    };
  },
  computed: {
    ...mapState({
      settingBar: state => state.setting.settingBar.opened,
      user: state => state.account.user,
      welcomeMsg: state => state.account.welcomeMsg
    }),
    avatar() {
      return `static/avatar/${this.user.avatar}`;
    }
  },
  methods: {
    /* handleSettingClick() {
      this.setSettingBar(!this.settingBar);
    },
    openProfile() {
      this.$router.push('/profile');
    },
    updatePassword() {
      this.updatePasswordModelVisible = true;
    },
    handleCancelUpdate() {
      this.updatePasswordModelVisible = false;
    },
    handleUpdate() {
      this.updatePasswordModelVisible = false;
      this.$message.success('更新密码成功，请重新登录系统');
      setTimeout(() => {
        this.logout();
      }, 1500);
    }, */
    popConfirm(e) {
      this.logout();
    },
    popCancel(e) {
      // do something when click cancel
    },
    logout() {
      let that = this;
      this.$get(`/logout/`+this.user.id)
        .then(() => {
          return new Promise((resolve, reject) => {
            this.$db.clear();
            // location.reload();
            this.$router.push('/login');
          })
        })
        // .catch(() => {
        //   this.$message.error('退出系统失败');
        // });
    }
    // ...mapMutations({ setSettingBar: 'setting/setSettingBar' })
  }
};
</script>

<style lang="less" scoped>
@baseFontSize: 16;
.ant-avatar-sm {
  width: 30px;
  height: 30px;
}
.avatar {
  margin: 20px 4px 20px 0;
  color: #1890ff;
  background: hsla(0, 0%, 100%, 0.85);
  vertical-align: middle;
}
.header-container {
  // height: (54 / @baseFontSize) * 1rem;
  height: inherit;
  line-height: 58px;
  vertical-align: top;
  display: inline-block;
  padding: 0;
  // cursor: pointer;
  font-size: (20 / @baseFontSize) * 1rem;
  img {
    display: inline-block;
    vertical-align: middle;
    padding-right: 1vw;
    border-right: solid #fff 1px;
  }
  div {
    color: #fff;
    font-size: (8 / @baseFontSize) * 1rem;
    display: inline-block;
    height: inherit;
    line-height: 18 / @baseFontSize * 1rem;
  }
  .user {
    vertical-align: top;
    padding-top: (10 / @baseFontSize) * 1rem;
    border-right: 2px solid #ebebeb;
    padding-right: (30 / @baseFontSize) * 1rem;
    display: inline-flex;
    flex-direction: column;
    .ico {
      padding-top: 10px;
    }
    .curr-user {
      color: #393d47;
      font-size: 18 / @baseFontSize * 1rem;
      // font-weight: bold;
      // letter-spacing: 11.5px;
    }
    .welcome {
      color: #8799b0;
      font-family: Arial;
      font-size: 10 / @baseFontSize * 1rem;
      position: relative;
      top: 6px;
    }
  }
  .quit-icon {
    // cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    vertical-align: top;
    font-size: 10 / @baseFontSize * 1rem;
    color: #6c7283;
    padding: 0 30px;
    padding-top: 10px;
    .ico {
      font-size: 18 / @baseFontSize * 1rem;
    }
    .quit-word {
      position: relative;
      top: 3px;
    }
  }
  /* div {
    display: inline-block;
  }
  .log-out {
    height: (18 / @baseFontSize) * 1rem;
  } */
}
</style>
